<script setup>
import { ref, h, getCurrentInstance, onMounted, watch } from 'vue';
import { FileDoneOutlined, ReloadOutlined, FullscreenOutlined, FullscreenExitOutlined} from '@ant-design/icons-vue';
import MessageNotification from "@/components/MessageNotification/MessageNotification.vue"
import { lgout } from "@/apis/login"
import { useUserStore } from '@/stores/user'
import { useSettingStore } from "@/stores/setting"
import { useRouter } from "vue-router"
import { useDark, useFullscreen } from "@vueuse/core";
import { useToggle } from '@vueuse/shared';
import Cookies from 'js-cookie';

const { isFullscreen, enter, exit, toggle } = useFullscreen()
const { Bus } = getCurrentInstance().appContext.config.globalProperties
const router = useRouter()
const user = useUserStore();
const useSetting = useSettingStore();
const pureColor = ref('');
const loading = ref(false);
const open = ref(false);
const isShowMessage = ref(false)
const currentRoute = ref("/crm")
onMounted(() => {
    useSetting.pureColor && (pureColor.value = useSetting.pureColor);
    if (sessionStorage.getItem("oneUrl")) {
        currentRoute.value = sessionStorage.getItem("oneUrl");
    }
})
// 暗黑模式
const isDark = useDark({
    selector: 'html',
    attribute: 'theme',
    valueDark: 'dark',
    valueLight: 'light',
})
const ontoggle = useToggle(isDark);
const handletoggle = () => {
    ontoggle();
    Bus.emit('changeLight', isDark)
}

const showDrawer = () => {
    open.value = true;
};
const onClose = () => {
    open.value = false;
};
const handleConserve = () => {
    loading.value = true
    setTimeout(() => {
        open.value = false;
        loading.value = false;
        useSetting.changeColor(pureColor.value);
        Bus.emit('changeColor');
    }, 2000)
};
const handlePersonalCenter = () => {
    router.push("/personal-managing");
}
const handlecalendar = () => {
    // console.log("日程表");
    router.push("/calendar");
}
const loginOut = () => {
    // lgout().then(res=>{
    //     console.log(res);
    // })
    // Cookies.remove('authorization');
    router.push("/login");
    user.clearUserInfo();
}
const openMessage = () => {
    isShowMessage.value = !isShowMessage.value;
}
const handleReset = () => {

}

</script>
<template>
    <div class="header-container">
        <span v-if="isDark" class="icon icon-noAnhei" title="" @click="handletoggle()"></span>
        <span v-if="!isDark" class="icon icon-anhei" title="" @click="handletoggle()"></span>
        <!-- <span class="icon icon-yz" title=""></span>
        <span class="icon icon-date" title="日历" @click="handlecalendar"></span>
        <span class="icon icon-message active" title="消息" @click="openMessage"></span> -->
        <span class="icon icon-setting" title="设置" @click="showDrawer"></span>
        <span>
            <FullscreenOutlined v-if="!isFullscreen" @click="toggle" />
            <FullscreenExitOutlined v-else @click="toggle" />
        </span>
        <div class="user-info">
            <a-dropdown placement="bottomRight">
                <div class="user-name" @click.prevent>
                    <img v-if="user.userInfo.img" :src="user.userInfo.img" alt="">
                    <img v-else src="@/assets/images/userHead.png" alt="">
                    <span class="color-font">{{ user.userInfo.nickName }}</span>
                    <span class="icon icon-pullDown"></span>
                    <!-- <img src="@/assets/images/upts.png" alt="" width="34"> -->
                </div>
                <template #overlay>
                    <a-menu>
                        <a-menu-item>
                            <a href="javascript:;" @click="handlePersonalCenter">个人中心</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:;" @click="showDrawer">布局设置</a>
                        </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item>
                            <a href="javascript:;" @click="loginOut">退出账号</a>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
        <a-drawer title="主题风格设置" placement="right" :closable="false" :open="open" @close="onClose">
            <div class="set-container">
                <div class="set-content">
                    <!-- <div class="menu-theme">
                        <div>
                            <img src="@/assets/images/dark.svg" alt="" @click="MenuTheme('dark')">
                            <CheckOutlined v-show="useSetting.menuTheme == 'dark'" />
                        </div>
                        <div>
                            <img src="@/assets/images/light.svg" alt="" @click="MenuTheme('light')">
                            <CheckOutlined v-show="useSetting.menuTheme == 'light'" />
                        </div>
                    </div> -->
                    <!-- <div class="line-box"></div> -->
                    <div class="color-box">
                        <span class="color-font">主题颜色</span>
                        <div>
                            <color-picker v-model:pureColor="pureColor" />
                        </div>
                    </div>
                    <div class="line-box"></div>
                </div>
                <div class="foot-btn">
                    <a-button type="primary" ghost :icon="h(FileDoneOutlined)" @click="handleConserve">保存配置</a-button>
                    <a-button type="primary" ghost :icon="h(ReloadOutlined)" @click="handleReset">重载配置</a-button>
                </div>
            </div>
        </a-drawer>
        <div class="loading-box" v-show="loading">
            <a-spin tip="数据保存中，请稍等..." :spinning="loading"></a-spin>
        </div>
        <MessageNotification :isShowMessage="isShowMessage" />
    </div>
</template>
<style lang='scss' scoped>
.header-container {
    height: $header-height;
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 0px 48px;
    color: var(--grey-9);

    &>span {
        font-size: 20px;
        margin: 0 15px;
        cursor: pointer;
        opacity: 1;

        &:hover {
            color: var(--themeColor);
        }

        &.active {
            position: relative;


            &::after {
                position: absolute;
                top: 1px;
                right: 4px;
                content: "";
                display: block;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: #E20944;
            }
        }
    }

    .user-info {
        cursor: pointer;
        margin-left: 22px;

        .user-name {
            display: flex;
            align-items: center;
            justify-content: right;

            &>span:nth-child(2) {
                font-size: 16px;
                font-weight: 400;
                margin: 0 12px;
                letter-spacing: 2px;
            }

            &>img {
                display: block;
                width: 34px;
                height: 34px;
                border-radius: 50%;
            }

        }
    }
}

.set-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .set-content {

        .color-box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>div {
                box-shadow: 0px 0px 3px 0px #cbc1c1;
                border-radius: 3px;
                padding: 5px;

                &>div {
                    margin-right: 0 !important;
                }
            }
        }

        .line-box {
            display: block;
            height: 0px;
            width: 100%;
            margin: 24px 0;
            border-top: 1px solid #dcdfe6;
            position: relative;
        }
    }

    .foot-btn {
        display: flex;
        justify-content: space-between;
    }
}

:deep(.ant-dropdown-menu-title-content) {
    text-align: center;
}

:deep(.vc-color-wrap) {
    margin-right: 0px;
}
</style>